<template>
    <div style="width:10rem;height:100%;overflow:hidden;">
            <header >
                <a @click="$api.goBack()" class="back"></a>

                <a class="add" @click="back()" >保存</a>
            </header>
            <vueCropper
            ref="cropper"
            :img="example2.img"
            :outputSize="example2.size"
            :outputType="example2.outputType"
            :info="example2.info"
            :canScale="example2.canScale"
            :autoCrop="example2.autoCrop"
            :autoCropWidth="example2.autoCropWidth"
            :autoCropHeight="example2.autoCropHeight"
            :fixed="example2.fixed"
            :fixedNumber="example2.fixedNumber"
        ></vueCropper>
    </div>
</template>
<script>
    import VueCropper from 'vue-cropper';
    export default {
        data() {
            return {
                example2: {
                    img: '',
                    info: true,
                    size: 1,
                    outputType: 'jpeg',
                    outputSize: 1, //图片质量 0.1-1
                    canScale: false,
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 330,
                    autoCropHeight: 330,
                    // 开启宽度和高度比例
                    fixed: false,
                    fixedNumber: [3, 3]
                },
            }
        },
        methods: {
            back() {
                this.finish('blob');
            },
            finish(type) {
                // 输出
                if (type === 'blob') {
                    this.$refs.cropper.getCropBlob((data) => {
                        var url = "upload/uploadImage"
                        var params = {
                            blobFile: data
                        }
                        this.$api.post(url, params, (data) => {
                            sessionStorage.setItem('imgOption', JSON.stringify(data.info));
                            this.$api.goBack();
                        }, null, true)

                    })
                } else {
                    this.$refs.cropper.getCropData((data) => {



                        sessionStorage.setItem('base64', data);
                        this.$api.goBack();
                    })
                }
            }
        },
        created() {
            var img = JSON.parse(sessionStorage.getItem('exampleImg'));
            if (img) {
                this.example2.img = img;
            }
        },
        components: {
            VueCropper
        },
    }
</script>